<template>
  <div>
    <a-modal
      :visible="visible"
      :title="title"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      :footer="null"
      @cancel="cancelClick"
      destroyOnClose
    >
      <a-form>
        <a-form-item v-bind="validateInfos.name">
          <a-input v-model:value="modelRef.name" placeholder="请输入名字" />
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-space :size="20">
          <a-button
            ghost
            type="primary"
            style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px"
            @click="cancelClick"
            >取消</a-button
          >
          <a-button
            type="primary"
            style="background: #2878FF; border: none; border-radius: 6px"
            @click="submitClick"
            :loading="loading"
            >提交</a-button
          >
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;
export default defineComponent({
  name: "NewClip",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    editData: {
      type: Object,
      default: () => {
        return;
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      loading: false,
    });

    const modelRef = reactive({
      name: "",
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入姓名",
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };

    const submitClick = () => {
      validate()
        .then(() => {
          state.loading = true;
          if (props.editData.id) {
            request
              .put("/work_ai", "/user/shotstack/group", {
                id: props.editData.id,
                group_name: modelRef.name,
              })
              .then((res) => {
                state.loading = false;
                message.success("修改成功");
                emit("onSubmit");
              });
            return;
          }
          request
            .post("/work_ai", "/user/shotstack/group", {
              merchant_library_id: props.id,
              group_name: modelRef.name,
            })
            .then((res) => {
              state.loading = false;
              message.success("添加成功");
              emit("onSubmit");
            });
        })
        .finally(() => {
          state.loading = false;
          resetFields();
        });
    };

    const title = computed(() => {
      return props.editData.id ? "编辑目类" : "添加目类";
    });

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          resetFields();
        } else {
          if (props.editData.id) {
            modelRef.name = props.editData.group_name;
          }
        }
      }
    );

    return {
      ...toRefs(state),
      cancelClick,
      validateInfos,
      resetFields,
      modelRef,
      submitClick,
      title,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
</style>
